import React, { useEffect, useState } from "react";
import { Dimensions, Image, StyleSheet, View } from "react-native";
import { TouchableOpacity } from "react-native"; //引用来自gesture handler会无效果 important!

//图片宽度全屏(也可自定义) 高度自适应
const CustomImage = ({ source, width = "100%", setParent }) => {
  const [height, setHeight] = useState(0);

  let screenWidth = Dimensions.get("window").width;
  let screenHeight = Dimensions.get("window").height;
  // console.log("hhhh", screenHeight);
  useEffect(() => {
    if (source.uri) {
      //网络图片
      // console.log("网络图片");
      Image.getSize(source.uri, (w, h) => {
        setHeight(Math.floor((screenWidth / w) * h));
      });
    } else {
      // console.log("本地图片");
      const result = Image.resolveAssetSource(source);
      let h = result.height;
      let w = result.width;
      setHeight(Math.floor((screenWidth / w) * h));
    }
  }, []);

  return (
    <TouchableOpacity
      style={{
        width: "100%",
        height,
        alignItems: "center",
      }}
      onPress={() => {
        setParent(true);
        // navigation.navigate("ZoomImage", { source: source });
      }}
    >
      <Image style={[styles.image, { width, height }]} source={source} />
    </TouchableOpacity>
  );
};

var styles = StyleSheet.create({
  image: {
    // resizeMode: "contain",
    width: "100%",
    height: 250,
  },
});
export default CustomImage;
